<template>
  <div class="test base-main">
    <div class="tip-view flex">
      <p>首页 / 调试页</p>
    </div>
    <a-badge status="processing" text="Processing" />
    <div class="box-box">box-box</div>
  </div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  computed: {},
};
</script>
<style lang="scss" scoped>
.box-box {
  width: 80px;
  height: 60px;
  border-radius: 5px;
  background: yellowgreen;
  margin: 20px;
  text-align: center;
  line-height: 60px;
  color: white;
  font-weight: bold;

   animation: myfirst 2s linear;
  -moz-animation: myfirst 2s; /* Firefox */
  -webkit-animation: myfirst 2s; /* Safari 和 Chrome */
  -o-animation: myfirst 2s; /* Opera */
}
@keyframes myfirst {
  0%   {background: red;}
  50%  {background: yellow; transform:rotate(9deg);}
  100% {background: yellow; margin-left:500px;transform:rotate(0); }
}

@-moz-keyframes myfirst /* Firefox */ {
   0%   {background: red;}
  50%  {background: yellow; transform:rotate(9deg);}
  100% {background: yellow; margin-left:500px;transform:rotate(0); }
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */ {
  0%   {background: red;}
  50%  {background: yellow; transform:rotate(9deg);}
  100% {background: yellow; margin-left:500px;transform:rotate(0); }
}

@-o-keyframes myfirst /* Opera */ {
  0%   {background: red;}
  25%  {background: yellow; transform:rotate(9deg);}
  100% {background: yellow; margin-left:20px;transform:rotate(0); }
}
</style>